<template>
  <div class="mainContent">
    <a-spin :spinning="spinning">
      <div style="width:90%;margin:0 auto;margin-top: 30px;">
        <a-row v-if="statusName == '审核不通过' && remark">
          <span style="font-size: 18px;font-weight: bold;color:blue">审核不通过&ensp;&ensp;&ensp;</span>
          <span style="color:blue;font-size: 16px;">{{remark}}</span>
        </a-row>
        <a-row>
          <a-col :xs="{ span : 24 }" :sm="{ span:4 }" class="formGroupTitle">终端信息</a-col>
        </a-row>
        <a-form style="margin-bottom: 20px;" layout="inline">
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="会员编号">
            <span class="ant-form-text">{{queryDetail.merchantMemberNo}}</span>
          </a-form-item>
          <!-- <a-form-item class='formItemWidth' v-bind="formItemLayout" label="会员账号">
                        <span class="ant-form-text">
                            {{queryDetail.null}}
                        </span>
          </a-form-item>-->
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="商户名称">
            <span class="ant-form-text">{{queryDetail.memberName}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="SN设备号">
            <span class="ant-form-text">{{queryDetail.sncode}}</span>
          </a-form-item>
          <br />
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="终端类型">
            <span class="ant-form-text" v-if="queryDetail.terminalType == 'pos'">传统pos</span>
            <span class="ant-form-text" v-if="queryDetail.terminalType == 'minipos'">电签pos</span>
            <span class="ant-form-text" v-if="queryDetail.terminalType == 'epos'">智能pos</span>
            <span class="ant-form-text" v-if="queryDetail.terminalType == 'mpos'">mpos</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="终端品牌">
            <span class="ant-form-text">{{queryDetail.factoryName}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="终端型号">
            <span class="ant-form-text">{{queryDetail.modelName}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="装机地址">
            <span v-if="sensitive=='0'" style="width:100%" class="ant-form-text">
              {{queryDetail.provinceName}}-
              {{queryDetail.cityName}}-
              {{queryDetail.countyName}}-
              {{queryDetail.address}}
            </span>
            <span v-else class="ant-form-text">
              {{ queryDetail|otherfilter }}
            </span>
          </a-form-item>
          <br />
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="装机联系人">
            <span v-if="sensitive=='0'" class="ant-form-text">{{queryDetail.contactName}}</span>
            <span v-else class="ant-form-text">{{queryDetail.contactName |nameFilter}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="联系电话">
            <span v-if="sensitive=='0'" class="ant-form-text">{{queryDetail.contactPhone}}</span>
            <span v-else class="ant-form-text">{{queryDetail.contactPhone|phoneFilter}}</span>
          </a-form-item>
          <br />
          <br />
          <div v-if="transTargetDTOList!=null && transTargetDTOList.length > 0">
            <a-row>
              <a-col :xs="{ span : 24 }" :sm="{ span:4 }" class="formGroupTitle">活动规则</a-col>
            </a-row>
            <span>
              自首笔交易之日起：
              <br />
              <span v-for="item in transTargetDTOList" :key="item">
                &ensp;&ensp;第{{item.startDay}}至{{item.endDay}}天，交易量累计达到{{item.targetAmount}}元，返现{{item.rewardAmount}}元；
                <br />
              </span>
            </span>
            <br />
            <br />
          </div>
          <a-button
            style="font-size: 12px;height: 30px;"
            @click="downLoadOther"
            :loading="loading"
            type="primary"
          >下载附件</a-button>
        </a-form>
        <div v-if="statusName == '审核不通过'" class="footClass">
          <!-- <a-button @click='backTransList'>
          <a-icon type="double-left" />返回</a-button>-->
          <a-button style="margin-left: 40px;" @click="modifyInfo" type="primary">修改</a-button>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script>




import { message } from "ant-design-vue";
import api from "@/common/api";
import { error } from "util";
import { fail } from "assert";

export default {
  name: "orgMyInfo",
  components: {},
  data() {
    return {
      iconLoading: false,
      loading: false,
      spinning: false,
      queryDetail: {},
      attachRequest: {},
      transTargetDTOList: null,
      Rewardlist: null,
      Finelist: null,
      remark: null,
      statusName: "",
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 17, offset: 1 },
          md: { span: 17, offset: 1 }
        }
      },
      sensitive:localStorage.getItem("sensitive")
    };
  },
  watch: {},
  computed: {},
  filters: {
    nameFilter(value) {
      if (value) {
        var reg = /^./;
        return value.replace(reg, "*");
      }
    },
    otherfilter(value) {
      if (value.provinceName) {
        let data =
          value.provinceName + "-" +value.cityName+"-"+ value.countyName + "-" + value.address;
        let len = data.length - 2;
        let arr = [];
        for (let i = 0; i < len; i++) {
          let item = "*";
          arr.push(item);
        }
        let arrstring = arr.join("");
        return (
          data.substring(0, 1) + arrstring + data.substring(data.length - 1)
        );
      }
    },
    phoneFilter(value) {
      if (value) {
        var reg = /^(\d{3})\d{4}(\d{4})$/;
        return value.replace(reg, "$1****$2");
      }
    },
  },
  mounted() {
    let id = this.$route.params.id;
    this.getQueryDetail(id);
  },
  methods: {
    getQueryDetail(id) {
      this.$axios.get("/agent/log/terminal/getById/" + id).then(
        res => {
          console.log(res);
          if (res.data.code == "OK") {
            this.queryDetail = res.data.data.logTerminalDTO;
            this.transTargetDTOList = res.data.data.transTargetDTOList;
            this.statusName = res.data.data.logTerminalDTO.statusName;
            this.remark = res.data.data.logTerminalDTO.remark;
            this.attachRequest = res.data.data.attachRequest;
          }
        },
        err => {}
      );
    },
    downLoadOther() {
      console.log("attachRequest", this.attachRequest);
      this.loading = true;
      this.$axios.post("/file/file/attach", this.attachRequest).then(
        res => {
          //   console.log('res',res)
          //   console.log("res.data.data:",res.data.data);
          this.loading = false;
          if (res.data.data != null) {
            window.location.href = res.data.data;
          } else {
            this.$message.error("附件不存在");
          }
        },
        err => {
          this.loading = false;
          this.$message.error(err.message);
        }
      );
    },
    modifyInfo() {
      this.$router.push({
        name: "商户新增终端",
        params: {
          ModificationData: this.queryDetail
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.card_sty {
  margin-bottom: 30px;
}

.mainContent {
  overflow-y: scroll;
  height: 100%;
  padding: 30px;
}

/* 滚动条样式 */
.mainContent::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

.formItemWidth {
  width: 30%;
  margin-bottom: 10px;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  margin-top: 15px;
  text-align: left;
  /* margin-left: 20px; */
}

.ant-card-head-title {
  padding: 12px 0 !important;
}

.ant-card-grid {
  padding: 12px;
}

.ant-card-head {
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 24px;
  border-radius: 2px 2px 0 0;
  zoom: 1;
  margin-bottom: -1px;
  min-height: 45px !important;
  font-size: 16px;
  color: #52506b;
  font-weight: 400;
  display: flex;
}

.ant-card .ant-card-grid:nth-child(4n + 1),
.ant-card .ant-card-grid:nth-child(4n + 2) {
  background: #f7f9fc;
}

.ant-card-grid:hover {
  /* box-shadow: none; */
  box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
    1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
}

.footClass {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>